═══ 1. Smalled HTML Extensions ═══ SMEHTM 1.00 The Smalled HTML Extensions are written as extensions for the Smalled editor. However, SMEHTM can be used with any other MLE based editor, such as the OS/2 system editor or Zed. The Extensions act as a floating toolbar in the form of a notebook. Also included in this package is an HTML example page that shows some useful samples of HTML tags. o Disclaimer Registering/Shareware o Using SMEHTM o The Pages o What's New/History o Future Attractions o About the Author o Smalled o Thanks ═══ 1.1. Using the Smalled HTML Extensions ═══ When you start using SMEHTM, the first thing you should do is give the main window the dimensions and place you prefer on the screen. These will be remembered. (The SMEHTM controls may have different sizes for different screen resolutions.) The next thing to do is to decide which editor you will use. SMEHTM was built with Smalled in mind, but it will function with any MLE based editor, such as the system editor (E.EXE). The first time SMEHTM is started, it will automatically start the system editor. It's fairly certain that everyone has this editor. If another editor is preferred, use the Config page to tell the Smalled HTML Extensions to use that editor. (SMEHTM can be started from within Smalled v1.4 or higher. In that case this setting doesn't have any meaning.) Every time a button in SMEHTM is pressed a tag will be entered in the editor, and the focus is then returned to the editor. All the HTML tags supported by SMEHTM are explained in the sections about the SMEHTM pages. Most of the time an HTML tag consists of two pieces, between which is text that will be formatted. For example,

formatted text

. You can press the Heading 1 key on the SMEHTM Font page and these tags will be entered in the text as

with the cursor between them. You can then start typing right away. This method is mostly used for writing an HTML page from scratch. Another method for entering HTML tags is to select the text you want to format and then hit the appropriate button in SMEHTM. The tags will be placed around the selected text and the selected text will stay intact. This method is used when adding tags to already existing text. The exception to this rule is the Char page which can be used to add accents to letters. If this is desired, you must select exactly one letter and hit the accent button of choice. If more than one character is selected or nothing is selected, nothing will happen. Many of the pages in SMEHTM contain controls other than buttons. These controls are always grouped together with at least one button. If these controls (most of them are spinbuttons) don't contain a value or show the value 0, nothing will be inserted in their place in the tag. Many tags can have different forms. The
tag, for example, has many possible combinations. Here are some of them: Example



By using the extra controls described above, any of these combinations can be made very quickly. SMEHTM supports fast keys to access the several pages and controls. This is described in the section Moving around. Most things should be pretty intuitive, but it wouldn't hurt to read this section. ═══ 1.1.1. Moving Around ═══ All the controls in SMEHTM support shortcuts. Take a look at the buttons and tags and you will see some of the letters are underlined. This means these controls can be activated with the push of just one button. You can jump from page to page by typing just the first letter of the tag. The same goes for the buttons. They can be accessed with the ALT key in combination with the underlined letter on the button. There is one snag though. These keys only act on the active window. With a notebook there are always two possibilities. o The notebook window is active. If this is the case, an emphasis rectangle is drawn in the current active tab and you can move to other pages just by pressing the first letter of the tab or by using the left/right arrows. If this window isn't active (emphasis rectangle isn't showing), just click on the status line to activate it. The status line is the area next to the two arrow pushbuttons. o The dialog in one of the notebook pages is active. You can tell if this is the case by looking at the controls in the dialog. One of these controls should have the focus. Another way of detecting this is to look at the notebook control. When this doesn't have the focus, the dialog probably will. (Of course the frame needs to be selected.) When this is the case, buttons can be activated with the ALT-letter combination. If this is done, the function associated with the button will be executed. Another way of moving between controls is the tab key. If this key is pressed, the next control will be made active. Pressing Return will activate the current control. ═══ 1.2. The Smalled HTML Extensions Pages ═══ All controls in SMEHTM are ordered in a notebook. Every page in this notebook handles a different aspect of the HTML tagging language. (This means the number of pages will certainly grow in the future.) In the help description of each page, a short explanation of the HTML code which is handled by that page appears. Also in the SMEHTM package is an example HTML page which contains a number of samples. o Main o Font o Page o Char o List o Link o Table o Image o Templates o Tools o Config o Register ═══ 1.2.1. Page 1 (Main) ═══ The Main page is used to set up the mandatory items for a basic HTML document. By pressing the Basic button on this page, the mandatory HTML tags are added to the text editor window. It doesn't matter how much text already exists in the editor, this command will add the necessary codes at the top and bottom of the text. If the two entry fields on the Main page are not filled, the Smalled HTML Extensions will add the mandatory codes in their simplest form. In this case, the following will be added: Basic code The first two lines in this sample are Comment lines. They are added to identify the document. Some browsers like to see the first line. The second line is added to show that the document was created with the Smalled HTML Extensions. The next statement is the first real HTML statement, . The tag defines that the document is an HTML page. Note that the document is closed at the end with , nothing beyond will show up in your document. The element contains information about the document. The combination must be between the and the tags. In most cases it will only contain the tag. With the <TITLE> tag, a line can be entered that describes the document. This title will appear in the titlebar of the browser you're using when viewing an HTML document. This text can be entered in the Title text field on the Main page. SMEHTM will automatically enter this text between the <TITLE> and tags. In most HTML pages, a background image is used. To accomplish this, the tag has to be modified. This tag uses a BACKGROUND= statement to accomplish this. Behind this statement the name of an image file (GIF, JPG...) must be entered between quotes. If the name of an image file is entered in the Background image field, SMEHTM will change the statement appropriately when the basic code is entered. ═══ 1.2.2. Page 2 (Font) ═══ An HTML document doesn't have the capability to handle text that a word processor has. It can only display one font at a time, but it can do a lot with that one font. In the Font page most of the possibilities are available (not all though: things like color, etc. aren't yet supported by SMEHTM). The page is divided into logical groups. Some tags listed in this page will have the same effect. This will depend on the browser you are using. The tags in the Heading section display the six Heading style possibilities. The heading dictates the size of the text formatted with it. Heading tags look like: The Font Style section gives access to tags that will format the font style of your text. The most commonly used are Italic, Bold and Underline. The following tags are supported by SMEHTM (note that some of these tags might not be supported by all browsers): o I Italic o B Bold o U Underline o S Strikeout o BL Blink o TT TeleType (code sample) The Font section gives the opportunity to set the size of the font that will be displayed. In HTML, it is possible to work with a base font size and define derivatives from that size. The philosophy of SMEHTM is to use the default font size and customize it when needed with the heading tag, or to set the font size by using the size button. HTML defines several ways to include code Samples and quotations. SMEHTM supports four of these tags. o Code Sample - This is used to display a code sample in a fixed-width font. This usually has the same effect as TT. o Block Quote - This produces a text quote usually right and left indented. o Citation - Also used to display citations or quotes but gives the text inline in Italics. o Sample - Is also used to show a code sample and has the same effect as Code in most browsers. HTML has the ability to give certain lines of text an Emphasis. In most cases Normal emphasis has the same effect as Italic and Strong emphasis has the same effect as Bold. Sub/Super-script tags are also possible. However, not all browsers support them. ═══ 1.2.3. Page 3 (Page) ═══ The Page page contains a number of items that are useful in doing layout work. Besides that, it contains the Comment tag (I didn't know where else to put it). This page is divided in two sections. The Layout section contains the following tags: o Center - This button will insert the
tags. All text, links, tables, images, etc. that are between these tags will be displayed centered on the screen or in the current indent. o Line Break - This forces a 'Hard return' in the text. o Paragraph - The

tags are used to format text into paragraphs. Between two paragraphs there will be a blank line. The Horizontal line section will create a
tag. This tag creates a line on the web page which by default will span the page within the current indents. There are several ways this line can be modified. For this, the other controls in this section can be used. If there aren't any values filled in, SMEHTM will generate a plain
tag. Depending on the settings in the other controls, this tag will be modified as follows: o Noshade - The Noshade option turns off the bevelling effect added in some browsers. o Align - Justifies the line to the left, right or center (default). o Size - Sets the thickness of the line. o Width - Sets the line length in pixels or as a percentage of the page width (within the current indents). The Comment tag is somewhat special. It doesn't have anything to do with page layout whatsoever. It simply allows you to add comment statements to your HTML text that won't show up in the web page when viewed on a WWW browser. This statement can be used for personal documentation. ═══ 1.2.4. Page 4 (Char) ═══ Computers can write characters with accents, and a number of sign characters. However, because of codepages, these characters can be located in very different places within the extended ASCII table. HTML has a solution for this; these characters are replaced by an HTML tag. The first section of this page, Accenting , takes care of various accents on characters. To place an accent on a character simply select it (select exactly one character) and press the button with the desired accent. If that accent is supported for the selected character, this character will be replaced with the HTML equivalent. If the accent isn't supported for that character, nothing happens. Some characters, like the > and < characters, are reserved because they are part of the HTML tagging language. If you want to use these characters in your document, use the corresponding buttons in the Reserved area. In the Characters area a number of character and symbols, such as the copyright symbol, can be selected. Pressing one of these buttons will cause the HTML tag for that symbol to be inserted in the text. ═══ 1.2.5. Page 5 (List) ═══ A powerful feature of HTML is the ability to use lists in a number of ways. This is a very commonly used feature on the WWW. Almost every web page that has a list of links to favorite pages uses this statement. In the example HTML page provided with SMEHTM a number of list samples can be found. One of the most attractive features of these lists is that they can be nested. Note: not all browsers support all the possibilities that HTML offers. HTML supports three different types of lists. o Ordered lists o Unordered lists o Definition lists Ordered lists display a list with numbered items. By default the list is numbered with normal (Arabic) numbers. If you want to use another type, select it in the Type spinbutton. The following types are supported: o 1, 2, 3 (default) o A, B, C o a, b, c o I, II, III o i, ii, iii For every ordered list a starting number can be defined. By default a list will start at 1 (or A, a, I or i). By using the Start spinbutton, you can change this value. If, for example, a 5 is added, the list will start numbering the elements with 5. If this spinbutton is set to 0, the Start option will be ignored. Unordered lists are lists in which every element has a bullet. Every time a new nested list (a list which is an item in another list) is created, the bullet will change. It is also possible to select the type of bullet for any list with the Type spinbutton. o disc o circle o square If this spinbutton is left blank the default type will be used. Note that not all browsers support all three bullet types. Definition lists are a special type of list used to combine a term and a definition. These form coupled pairs in which the term is displayed on one line and the definition is indented on the next line(s). For an example of Definition lists see the HTML file included in this package. ═══ 1.2.6. Page 6 (Link) ═══ Links... Well, these are what a Hypertext document is all about. With links, you're able to jump to other places on the Web or within your document, display pictures, start an e-mail session, retrieve a file, etc. HTML supports many different types of links. The most important (and most used) are supported by SMEHTM. Looking more precisely at links, we see that what is defined is the beginning or end of a link. In most cases it will be the beginning. In such a link (anchor) we define a URL (Unique Resource Locator) and the access method for that URL. The URL for a given access method can be typed in the entryfield beside the desired access method. Clicking on the appropriate button causes the link to be inserted. After this, we simply type the text that will be highlighted as a link in the web page. SMEHTM supports the following access methods: o http:// - This link will give a connection to another web page. The URL expected is another page on the web (for example, http://www.wilmington.net/bmtmicro/). o ftp:// - This will give a connection to an FTP site (for example, ftp://hobbes.nmsu.edu). You can also add a direct download link to an FTP site (for example, ftp://hobbes.nmsu.edu/os2/editors/smaled13.zip). o mailto: - This is a very nice feature. When this link is added to a page, the WWW browser will display a form from which a user can send an e-mail message to the given address. o file: - This link isn't used very much. It creates a link to a local file (one on the hard drive of the user). o HTML ref - This button exists because HTML supports a number of access methods that aren't available in SMEHTM. A plain tag is added to which the user can add access methods like news, gopher, wais, etc. Besides these links, HTML also allows the possibility to provide NAME labels. A NAME label is a point in your text marked with a certain name. You can add a link anywhere that will take you directly to this label (a jump if you like). A label is added with the NAME button. A reference to this label is added with the # button. The example HTML page in this package shows a number of label possibilities. The Link page also has another convenient feature. For every type of link there is a four store memory available. The contents of each listbox can be accessed by pressing the little button on the right of the entryfield or by using the up/down cursor keys. Every listbox can store four memory items. These can be filled by typing in the link name and hitting the Enter key on the keyboard. An audio signal will notify you that a new item is stored in memory. If a new item is added and the store already contains four items, the top-most item is discarded. The stored items will be remembered by SMEHTM between sessions. ═══ 1.2.7. Page 7 (Table) ═══ A powerful but underestimated feature of HTML is the capability to build attractive tables. A nice example how tables can be built is Gary Hammer's Must Have Utilities List. The Table page is the most crowded page in SMEHTM. This gives an indication of what can be done with tables. This page has two main sections, one for creating a table and one for adding table items. With the table section, all kinds of tables can be set up. As within all SMEHTM pages, if a spinbutton doesn't show any value or is filled with a 0, the corresponding attributes won't be added to the tag. The tag can have the following attributes: o Border - Including this attribute will draw borders around all cells. The border thickness can be specified in pixels. o Spacing - The cell spacing gives the amount of space in pixels between individual cells. o Padding - This sets the space in pixels between the border of the cell and the contents of the cell. o Width - The width sets the desired width of the table. This can be in pixels or in a percentage (% checkbox) of the page width. The Caption button is a special case. With the caption tag you can add a title to the table. Use the spinbutton to set the placement to top or bottom. The Cell/Row section contains buttons for adding rows, cells and headers. o Row - This is a mandatory element in a table. It tells the browser to start a new row in the table. Every time a new row is desired, this tag should be added. To modify the row element use the Align and Valign spinbuttons. These tell the browser how to align (and vertically align) the text in the row. o Data - This button will start a new cell. If data (text, graphics, etc.) is to be added, this tag is mandatory. The cells can be tailored to suit different needs; for this the following attributes are used : - Width - Gives the width of the cell either in pixels or in percentage (use the % checkbox) of the table. - Colspan - Specifies how many columns a cell should span. - Rowspan - Specifies how many rows a cell should span. o Header - This button adds a table heading tag. This tells the browser to start a heading cell. Such a cell is the same as a normal (data) cell, but the contents are usually centered and bold. o Clear - The clear button doesn't add an HTML tag. It is only added for convenience and will clear the spinbuttons in the Cell/Row section. When the Data, Header or Row buttons are used, SMEHTM takes only those attributes from the page that are valid for the chosen button. The Header tag may have all the attributes, the Row tag only the Valign and Align attributes and the Data tag can only have those attributes not used by Row. ═══ 1.2.8. Page 8 (Image) ═══ Most web pages contain a wealth of images. (Don't overdo this though, it will make loading the page relatively slow.) With the Image page, an image can be added to an HTML page. Note that an image can also be used as a link or as part of a table. Images in HTML pages are usually .gif or .jpg files. In the entryfield beside the Image button the name of such a file can be entered. This can be just a file name or a complete URL for the image. With images, a large number of attributes are possible. o Alt - With the Alt attribute, alternate text can be added in case the browser can not display the image. I strongly recommend including alternate text. o Height/Width - These attributes can scale the image. If only one of them is filled in, the other will be scaled accordingly. It's a very good idea to specify these values. This allows browsers to format and display text before images and so create the feel of a quicker loading time. o Align - Will align the picture on the page. o Hspace/Vspace - Will set the horizontal and vertical space around the image. o Border - When an image is included in a link, the border indicating this can be re-sized. ═══ 1.2.9. Page 9 (Templates) ═══ The Templates function of the Smalled HTML Extensions can be very useful. SMEHTM allows 6 templates to be entered and remembered. What is a template? Well, it's simply the name of a file somewhere on the system that contains text that can be inserted at the current cursor position in the editor. Certain constructions that are used very often can be placed in such a file. This way they will only be one button click away. ═══ 1.2.10. Page 10 (Tools) ═══ The tools page doesn't contain any HTML tagging functions. It contains three functions that can make editing an HTML document a lot easier. All three functions only work with selected text, so if there isn't any text selected in the editor, the buttons in this page won't function. Also the functions only work with tags in the form <......>. This means tags like :Aacute; won't be touched. o Strip removes all the HTML tags from the currently selected text. o Lower converts all the tags in the selected text to lower case. o Upper converts all the tags in the selected text to Upper case. ═══ 1.2.11. Page 11 (Config) ═══ In future releases this page will be expanded. For now only some basic settings can be entered. Editor - This field will indicate which editor should be used by SMEHTM. Preferably this will be Smalled. If Smalled v1.4 or higher is used, this field doesn't have much value because SMEHTM can be started from within Smalled. If nothing is entered here, SMEHTM will use the E.EXE editor. If you would like to use another editor, fill in the entire path to that editor. Every editor based on the MLE control should work. Startup page - In this spinbutton the page that will be displayed when SMEHTM is started can be set. The default for this setting is the About page. Float on top - SMEHTM can remain on top of the editor after a button in SMEHTM is pushed. Pressing a button will, in most cases, cause a tag to be inserted in the editor. After this action the editor usually regains the focus. SMEHTM can react in two possible ways. o It can stay on top of the editor after a tag is inserted. If you want this behavior, the Float on top button should be checked. If you want the editor to be on top, just click on the menubar, the toolbar or activate a menu option. If this is done, SMEHTM assumes you want the editor on top and will go to the background. o After the insertion of a tag, SMEHTM will always place the editor on top. If you want this behavior, make sure the checkbutton is not flagged. This floating behavior can be changed on the fly. If the state of the check button is changed, the new behavior becomes active immediately. This setting is remembered between sessions. Use bitmaps in tabs - When first started, SMEHTM will display text in the tabs that are used to select the various pages. It is also possible to use bitmaps in the tabs. The advantage of doing this is that more tabs can be displayed in less space. This makes more pages rapidly accessible. If you like bitmaps on the tabs, flag this checkbutton. For this option to become active, SMEHTM must be restarted. Insert tags in lowercase - By default SMEHTM uses upper case characters to insert HTML tags. However some people like them in lower case. If you prefer tags inserted in lower case, flag this checkbutton. There is one situation though, where this may be a disadvantage. If Templates are being inserted, SMEHTM will try to convert the tags in the templates to lower case. This may take some time (5 seconds for 10Kb on my machine), while not having the lower-case conversion selected will insert the template instantly. Lower/Upper case conversion can also be invoked after tags have been entered with the controls on the Tools page. ═══ 1.2.12. Page 14 (Register) ═══ The registration fee for the Smalled HTML Extensions is $15 (use the ORDER.SMH file to register). You may use SMEHTM for a trial period of 40 days before registering it. During the use of the unregistered version, every time SMEHTM is started a dialog box will be displayed for a number of seconds to point out that the program is shareware. After 40 days, the Link page will be locked. To register SMEHTM you first have to produce a Personal key. This is a numerical value derived from your name. When you enter your name in the Name entryfield, the Personal key value should show automatically. If you've obtained a registration key, it can be entered in the Register key entryfield. If this key is valid, the Register button will become available. By pressing this button, you will register. This means the nagging dialog-box at startup will disappear and the lockup for the Link page will not happen. Registering SMEHTM costs only $15. Check out the combined package of Smalled and SMEHTM for only $25. ═══ 1.3. Disclaimer ═══ ====DISCLAIMER==== This package is provided "as is", without any guarantees or warranties whatsoever. Eric Slaats / Bianchi Software are not liable or responsible for any loss or damage of any kind, including, but not limited to, losses of a financial, physical, emotional, marital, social, or mental nature, that may result from the use or the purported use of anything in this package, for any purpose whatsoever. You may distribute this shareware version of Smalled if the following conditions are met: 1. The distributed archive must contain ONLY the files OS2_2xx.ZIP, WARP.ZIP, SMEHTM.HLP, README.SMH, FILE_ID.DIZ, ORDER.SMH, EXAMPLE.ZIP 2. The contents of this archive are NOT MODIFIED in any way. 3. This version is not to be sold. However, a reasonable disk copying fee is permitted. ====REGISTERING==== If you like SMEHTM and want to keep using it after the 40 day trial period, you must register it. In the case of the Smalled HTML Extensions, this means you must buy a registration key and enter it in the Register page. (See also the ORDER.SMH file.) Registering SMEHTM costs $15. (Take a look at the BMT micro (http://www.wilmington.net/bmtmicro/) site for a combined offer of SMEHTM and Smalled for $25.) You may register by sending the order.sme form by mail to: BMT Micro PO Box 15016 Wilmington, NC 28408 U.S.A. Bianchi Software Tongelresestraat 61 5613 DB Eindhoven The Netherlands Ordering by fax or e-mail (credit card) can only be done through BMT Micro. Enjoy and SUPPORT SHARE/FREEWARE! For support, please do not contact BMT Micro. Contact Bianchi Software, preferably through e-mail at (Eric.Slaats@pi.net). ═══ 1.4. What's New/History ═══ New/Changed in SMEHTM version 1.00 June 1996 Well, all's new since this is the initial release. If you've got any wishes just mail me. :) ═══ 1.5. Future Attractions ═══ o HTML previewer in Smalled o Color page o Forms page o Counter page o Clickable map page o Drag and Drop for images o Configurable floating toolbar o DDE support o Page order configurable o Float properties configurable ═══ 2. Support ═══ SMEHTM is a Bianchi Software product. If you have any problems, wishes, etc., please contact Bianchi Software (preferably through e-mail) at: Bianchi Software Tongelresestraat 61 5613 DB Eindhoven e-mail: Eric.Slaats@pi.net ═══ 2.1. About the Author ═══ If you feel the need to contact me, please send your comments, criticism, wishes, bugs and postcards (keep 'em comin' :) ) to: E. Slaats Tongelresestraat 61 5613 DB Eindhoven The Netherlands e-mail: Eric.Slaats@pi.net ═══ 2.2. Thanks ═══ !Thanks! I've got a number of people to thank for their help while I was building this applet. I'm thankful it's finished (and so are my wife and kids). Thanks to: o Paulo Mario dos S. D. de Moraes for his truly great remarks. o Trevor Smith of Haligonian Media for putting the finishing touches on this help file. ═══ 3. Smalled ═══ SMEHTM is built for the Smalled editor. Smalled is a high powered, multi-threaded, 32-bit, OS/2 PM editor. It is small in size (77 Kb for Warp), very fast and comes with lots of extras compared to the E.EXE editor. Smalled takes full advantage of OS/2 specialties like Drag-n-Drop (fully DragText compatible), EA's, multi-threading, ATM font support, etc. Also, from version 1.4 on, SMEHTM can be started from within Smalled and an HTML Previewer is being built for Smalled. This means you will be able to view HTML pages from within Smalled. Some of the current Smalled features are: o Full Drag-n-Drop interface for whole or selected text, meaning: - Open - Save - Printing - Shredding - Copy - Move - Changing fonts - Changing colors - Understands the DragText rendering method, so it's fully DragText compatible o WYSIWYG printing o Backup facility o Text file settings (like fonts, etc.) are saved in the EA's, so the text is pure ASCII o Toolbar with bubble help o Highly configurable (Toolbar, Drag-n-Drop, Dialogs, Default dir, etc.) o File-find and File-history in file-dialog o File information o Find, replace and goto dialogs with memory o ATM font support (also for printing) o Line Break (formatting) If you would like to try Smalled, look for the file Smaledxx.zip on Hobbes in the editors directory or at the BMT Micro site (ftp://ftp.wilmington.net/bmtmicro/smaled13.zip). Smalled can be bought in a package deal with SMEHTM for a reduced price. Check out the BMT Micro site at http://www.wilmington.net/bmtmicro/ for more details. ═══ ═══ If you need help polishing your documentation or if you need .INF or .HLP files created for your applications, contact Haligonian Media at editor@haligonian.com or (902) 461-2266.